<template>
  <div class="top-category">
    <div class="container m-top-20">
      <!-- 面包屑 -->
      <div class="bread-container">
        <el-breadcrumb separator=">">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>寻宝</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="wrapper">
          <div class="bg rotate"></div>
          <div class="open-has" :class="{ opened: isChestOpen }">
            <div class="mod-chest">
              <!-- 宝箱关闭状态 -->
              <div
                class="chest-close"
                :class="{ shake: isShaking, show: isChestClosed }"
                @click="handleChestClick"
              >
                <div class="gift"></div>
                <div class="tips">
                  <i class="arrow"></i>
                </div>
              </div>
              <!-- 宝箱打开状态 -->
              <div class="chest-open" :class="{ show: isChestOpen }">
                <div class="mod-chest-cont open-cont">
                  <div class="content">
                    <div class="gift">为您寻宝到这件宝物！！</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import './css/global.css'
import './css/open.css'
import { ref, nextTick } from 'vue' // 导入 nextTick
import { getRandomItemId } from '@/apis/findtreasure'
// 控制宝箱是否打开
const isChestOpen = ref(false)
// 控制宝箱是否震动
const isShaking = ref(false)
// 控制宝箱是否在关闭状态
const isChestClosed = ref(true)

// const idLists = [
//   3997602, 3995284, 3993828, 3993481, 3992367, 3991840, 3987204, 3986121,
//   3997974, 1270008, 1269010, 1135081, 1135080, 1135079, 1135077, 1135076,
//   1135075, 3464033, 1621018, 1593000, 1555000, 1436033, 1281002, 4001285,
//   4001126, 4000914, 4000620, 4027473, 4027466, 4023738, 4023641, 4023638,
//   4007784, 3998535, 3995013, 4023751, 3987992, 3436033, 1436010, 1129016,
//   1021000, 1009026, 1006051, 1006029, 3465081, 4000009, 4027998, 4017718,
//   4010699, 3999485, 3998109, 3990408, 3990343, 4023839, 3529022, 3506005,
//   3499024, 3468024, 1512000, 1458011, 1111002, 3994432, 3992720, 3996603,
//   3995454, 3994572, 3994179, 3993694, 3988016, 3987478, 3550194, 4026116,
//   1589017, 1548001, 1540017, 1525018, 1306019, 1306017, 1085007, 1076004
// ]

// 点击宝箱的处理函数
const handleChestClick = () => {
  // 设置震动效果
  isShaking.value = true
  // 使用 nextTick 确保 DOM 更新完成后再执行后续操作
  nextTick(() => {
    // 震动效果持续 1 秒
    setTimeout(() => {
      isShaking.value = false // 震动结束后移除震动效果
      isChestOpen.value = true // 打开宝箱
      isChestClosed.value = false // 宝箱关闭状态变为打开

      // 200 毫秒后执行宝箱开的动画
      setTimeout(() => {
        // 在宝箱打开后执行跳转操作
        // const randomId = idLists[Math.floor(Math.random() * idLists.length)];
        _getRandomItemId()
        // 拼接并跳转到新的 URL
      }, 700) // 700 毫秒后跳转到百度
    }, 1000) // 震动持续 1 秒
  })
}
const _getRandomItemId = async () => {
  let randomId = ''
  const res = await getRandomItemId()
  console.log(res)

  randomId = res.data
  console.log(randomId)

  toDetils(randomId)
}
const toDetils = (id) => {
  window.location.href = `/detail/${id}`
}
</script>
<style scoped lang="scss">
.top-category {
  h3 {
    font-size: 28px;
    color: #666;
    font-weight: normal;
    text-align: center;
    line-height: 100px;
  }

  .sub-list {
    margin-top: 20px;
    background-color: #fff;

    ul {
      display: flex;
      padding: 0 32px;
      flex-wrap: wrap;

      li {
        width: 168px;
        height: 160px;

        a {
          text-align: center;
          display: block;
          font-size: 16px;

          img {
            width: 100px;
            height: 100px;
          }

          p {
            line-height: 40px;
          }

          &:hover {
            color: $xtxColor;
          }
        }
      }
    }
  }

  .ref-goods {
    background-color: #fff;
    margin-top: 20px;
    position: relative;

    .head {
      .xtx-more {
        position: absolute;
        top: 20px;
        right: 20px;
      }

      .tag {
        text-align: center;
        color: #999;
        font-size: 20px;
        position: relative;
        top: -20px;
      }
    }
    .body {
      display: flex;
      justify-content: space-around;
      padding: 0 40px 30px;
    }
  }
  .bread-container {
    padding: 25px 0;
  }
}
</style>
